<template>
	<view style="width: 100%;">
		<view class="uni-input-wrapper">
			<input class="uni-input" focus placeholder="输入计划名称" />
		</view>
		
		<uni-section title="计划生效时间" type="line" style="margin: 0;"></uni-section>
		<uni-datetime-picker v-model="dRange" type="daterange" rangeSeparator="至" @maskClick="maskClick" />
		<uni-section title="每日时间" type="line" style="margin: 0;"></uni-section>
		<view style="display: flex;width: 100%;padding: 10px;">
<!-- 			开始时间
			<picker style="width: 40%;" mode="time" :value="time.tStart" start="09:01" end="21:01" @change="bindTimeChange">
				<view class="uni-input">{{time.tStart}}</view>
			</picker>
			<text>结束时间</text>
			<picker style="width: 40%;border-color: #b5b5b5;border: solid;" mode="time" :value="time.tStart" start="09:01" end="21:01" @change="bindTimeChange">
				<view class="uni-input">{{time.tStart}}</view>
			</picker> -->
			<view style="line-height: 45px;width: 20%;">
				选择时间
			</view>
			<view style="width: 30%;border-bottom: solid; border-width: 2px; border-color: #e2e2e2;height: 40px;margin-left: 10px;margin-right: 10px;">
				<picker mode="time" :value="time.tStart" start="09:01" end="21:01" @change="bindTimeChange">
					<view class="uni-input">{{time.tStart}}</view>
				</picker>
			</view>
			<view style="line-height: 45px;">
				到
			</view>
			<view style="width: 30%;border-bottom: solid; border-width: 2px; border-color: #e2e2e2;height: 40px;margin-left: 10px;margin-right: 10px;">
				<picker mode="time" :value="time.tStart" start="09:01" end="21:01" @change="bindTimeChange">
					<view class="uni-input">{{time.tStart}}</view>
				</picker>
			</view>
		</view>

		<uni-section title="配置巡检工作日" type="line" style="margin: 0;"></uni-section>
		<view style="100%;display: flex;">
			<view style="width: 20%;text-align: center;">
				<view>全选</view>
				<checkbox value="cb1" checked="true" />
			</view>
			<view style="width: 20%;text-align: center;">
				<view>周一</view>
				<checkbox value="cb1" checked="true" />
			</view>
			<view style="width: 20%;text-align: center;">
				<view>周二</view>
				<checkbox value="cb1" checked="true" />
			</view>
			<view style="width: 20%;text-align: center;">
				<view>周三</view>
				<checkbox value="cb1" checked="true" />
			</view>
			<view style="width: 20%;text-align: center;">
				<view>周四</view>
				<checkbox value="cb1" checked="true" />
			</view>
			<view style="width: 20%;text-align: center;">
				<view>周五</view>
				<checkbox value="cb1" checked="true" />
			</view>
			<view style="width: 20%;text-align: center;">
				<view>周六</view>
				<checkbox value="cb1" checked="true" />
			</view>
			<view style="width: 20%;text-align: center;">
				<view>周日</view>
				<checkbox value="cb1" checked="true" />
			</view>
		</view>
		<uni-section title="配置巡检目标/规则/终端" type="line" style="margin: 0;"></uni-section>
		<uni-collapse-item title="点击选择标签">
			<view class="content">
				<text class="text">折叠内容主体，这是一段比较长内容。默认折叠主要内容，只显示当前项标题。点击标题展开，才能看到这段文字。再次点击标题，折叠内容。</text>
			</view>
		</uni-collapse-item>
		<uni-collapse-item title="点击配置规则">
			<view class="content">
				<text class="text">折叠内容主体，这是一段比较长内容。默认折叠主要内容，只显示当前项标题。点击标题展开，才能看到这段文字。再次点击标题，折叠内容。</text>
			</view>
		</uni-collapse-item>
		<uni-collapse-item title="点击选择终端">
			<view class="content">
				<text class="text">折叠内容主体，这是一段比较长内容。默认折叠主要内容，只显示当前项标题。点击标题展开，才能看到这段文字。再次点击标题，折叠内容。</text>
			</view>
		</uni-collapse-item>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				dRange:{
					
				},
				time:{
					tStart:'',
					tEnd:''
				},
			}
		},
		methods:{
		}
	}
</script>

<style>
	.uni-input-wrapper {
	    display: flex;
	    flex-direction: row;
	    flex-wrap: nowrap;
	    background-color: #FFFFFF;
	}
	
	.uni-input {
		margin: 10px;
	    height: 25px;
	    line-height: 25px;
	    font-size: 15px;
	    padding: 0px;
	    flex: 1;
	    background-color: #FFFFFF;
	}
</style>
